<template>
	<view class="allChartBox">
		<view class="allChartBox_top">
			<view style="width: 50%;">
				<view style="display: flex;" @click="inputF">
					<up-icon name="calendar" color="#00AC79" size="24"></up-icon> 
					<view style="font-size: 16px;color: #00AC79"> {{timeValue}}</view> 
				</view>
				
				<up-datetime-picker ref="datetimePicker" :formatter="formatter" v-model="value1" :show="show"
					mode="date" @confirm="dateIsOk" @cancel="dateIsNo"></up-datetime-picker>
			</view>
			<view style="width: 50%;">
				<view style="display: flex;" @click="inputFF">
					<up-icon name="setting" color="#00AC79" size="24"></up-icon> 
					<view style="font-size: 16px;color: #00AC79"> {{pickerValue}}</view> 
				</view>
				<up-picker :show="pickerShow" :columns="columns" keyName="transformerSn" @confirm="pickerIsOk"
					@cancel="pickerIsNo"></up-picker>
			</view>
		</view>
		<view class="allChartBox_bottom">
			<view class="bottomItem">
				<view class="name">有功</view>
				<view class="chartBox">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :canvas2d="true"
						canvasId="CanvasId" :ontouch="true" />
				</view>
			</view>
			<view class="bottomItem">
				<view class="name">无功</view>
				<view class="chartBox">
					<qiun-data-charts type="line" :opts="wopts" :chartData="wchartData" :canvas2d="true"
						canvasId="wCanvasId" :ontouch="true" />
				</view>
			</view>
			<view class="bottomItem">
				<view class="name">视在</view>
				<view class="chartBox">
					<qiun-data-charts type="line" :opts="sopts" :chartData="schartData" :canvas2d="true"
						canvasId="sCanvasId" :ontouch="true" />
				</view>
			</view>
			<view class="bottomItem">
				<view class="name">负载</view>
				<view class="chartBox">
					<qiun-data-charts type="line" :opts="fopts" :chartData="fchartData" :canvas2d="true"
						canvasId="fCanvasId" :ontouch="true" />
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		nextTick,
		getCurrentInstance
	} from 'vue'
	let {
		proxy
	} = getCurrentInstance();
	import {
		onReady,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	let show = ref(false)
	let pickerShow = ref(false)
	let value1 = ref(Number(new Date()))
	const timeValue = ref('')
	const pickerValue = ref('')
	const inputF = () => {
		console.log('111111')
		show.value = true
	}
	const inputFF = () => {
		pickerShow.value = true
	}
	const columns = reactive([])
	// 获取设备列表
	const getEquipmentList = () => {
		let opts = {
			url: proxy.$api.getDeviceList,
			method: "POST",
		};
		proxy.$request.httpTokenRequest(opts).then((res) => {
			if (res.data.code === 200) {
				columns.push(res.data.data)
				pickerValue.value = columns[0][0].transformerSn
			} else {
				proxy.$refs.uToast.show({
					type: 'error',
					message: res.data.msg
				})
			}
		}).catch((err) => {
			proxy.$refs.uToast.show({
				type: 'error',
				message: err
			})
		})

	}
	// 有功图表
	const chartData = ref({
		categories: [],
		series: [{
			name: "",
			data: []
		}]
	})
	const opts = ref({
		color: ["#00AC79"],
		padding: [20, 10, 0, 10],
		enableScroll: true,
		legend: {},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 6
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow"
			}
		}
	})

	// 无功图表
	const wchartData = ref({
		categories: [],
		series: [{
			name: "",
			data: []
		}]
	})
	const wopts = ref({
		color: ["#00AC79"],
		padding: [20, 10, 0, 10],
		enableScroll: true,
		legend: {},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 6
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow"
			}
		}
	})
	// 视在图表
	const schartData = ref({
		categories: [],
		series: [{
			name: "",
			data: []
		}]
	})
	const sopts = ref({
		color: ["#00AC79"],
		padding: [20, 10, 0, 10],
		enableScroll: true,
		legend: {},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 6
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow"
			}
		}
	})
	// 负载图表
	const fchartData = ref({
		categories: [],
		series: [{
			name: "",
			data: []
		}]
	})
	const fopts = ref({
		color: ["#00AC79"],
		padding: [20, 10, 0, 10],
		enableScroll: true,
		legend: {},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 6
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow"
			}
		}
	})
	const drawList = ref([{
			name: '有功功率',
			field: 'p'
		},
		{
			name: '无功功率',
			field: 'q'
		},
		{
			name: '视功功率',
			field: 'stot'
		},
		{
			name: '负载率',
			field: 'stot-capacity'
		}

	])
	// 画图
	const getDraw = (pickerValue, timeValue) => {
		let opts = {
			url: `${proxy.$api.getAllChart}?adcode=${timeValue}&date=${pickerValue}`,
			method: "POST",
		};

		proxy.$request.httpTokenRequest(opts).then((res) => {
			if (res.data.code === 200) {
				
				res.data.data.time=res.data.data.time.map(datetime => datetime.slice(11, 16));
				chartData.value.categories = res.data.data.time
				chartData.value.series = [{
					name: drawList.value[0].name,
					data: res.data.data['p']
				}]
				wchartData.value.categories = res.data.data.time
				wchartData.value.series = [{
					name: drawList.value[1].name,
					data: res.data.data['q']
				}]
				schartData.value.categories = res.data.data.time
				schartData.value.series = [{
					name: drawList.value[2].name,
					data: res.data.data['stot']
				}]

				fchartData.value.categories = res.data.data.time
				fchartData.value.series = [{
					name: drawList.value[3].name,
					data: res.data.data['stot-capacity']
				}]


			} else {
				proxy.$refs.uToast.show({
					type: 'error',
					message: res.data.msg
				})
			}
		}).catch((err) => {
			proxy.$refs.uToast.show({
				type: 'error',
				message: err
			})
		})
	}

	const formatDate = (date) => {
		const pad = (num) => (num < 10 ? '0' + num : num);

		const year = date.getFullYear();
		const month = pad(date.getMonth() + 1);
		const day = pad(date.getDate());
		const hours = pad(date.getHours());
		const minutes = pad(date.getMinutes());
		const seconds = pad(date.getSeconds());

		return `${year}-${month}-${day} `


	}
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		return value
	}
	const getNew = () => {
		getDraw(timeValue.value, pickerValue.value)
	}
	const pickerIsOk = (e) => {
		pickerValue.value = e.value[0].transformerSn
		pickerShow.value = false
		getDraw(timeValue.value, pickerValue.value)
	}
	const pickerIsNo = () => {
		pickerShow.value = false
	}
	const dateIsOk = (e) => {

		const date = new Date(e.value);
		timeValue.value = formatDate(date);

		show.value = false

		getDraw(timeValue.value, pickerValue.value)
	}
	const dateIsNo = () => {

		show.value = false
	}
	const getCurrentDate = () => {
		const now = new Date();
		timeValue.value =
			`${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`;

	};

	defineExpose({
		getNew
	});
	onLoad(() => {

	})
	onMounted(() => {
		getCurrentDate()
		getEquipmentList()
		setTimeout(() => {
			getDraw(timeValue.value, pickerValue.value)
		}, 500)
	})
	onReady(() => {

		proxy.$refs.datetimePicker.setFormatter(formatter)
	})
</script>

<style lang="scss">
	.allChartBox {
		padding-bottom: 30rpx;

		&_top {
			padding: 18rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
		}

		&_bottom {
			margin-top: 32rpx;
			padding: 0 16rpx;
			box-sizing: border-box;

			.bottomItem {
				margin-bottom: 32rpx;

				.name {
					padding: 0 16rpx;
					box-sizing: border-box;
					font-size: 32rpx;
					color: #000;
					font-weight: 550;
					margin-bottom: 20rpx;
				}

				.chartBox {
					width: 100%;
					height: 366rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

			}
		}
	}
</style>